<template>
  <div class="dashboard-container">
    <!-- 1. 顶部 Tab 导航 -->
    <TabChange :order-statics="orderStatics" v-model:active-tab="activeTab" @tab-change="handleTabChange" />

    <!-- 2. 主内容区 (搜索 + 表格 + 分页) -->
    <div class="content-container">
      <!-- 搜索项 -->
      <div class="tableBar">
        <el-form :inline="true" @submit.prevent="handleSearch">
          <el-form-item label="订单号：">
            <el-input v-model="searchForm.number" placeholder="请填写订单号" clearable @clear="handleSearch" />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="searchForm.phone" placeholder="请填写手机号" clearable @clear="handleSearch" />
          </el-form-item>
          <el-form-item label="下单时间：">
            <el-date-picker v-model="searchForm.timeRange" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-btn" @click="handleSearch" :loading="loading">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" stripe class="tableBox">
        <el-table-column prop="number" label="订单号" min-width="150" />
        <el-table-column v-if="[0].includes(activeTab)" label="订单状态" min-width="100">
          <template #default="{ row }">{{ getOrderType(row) }}</template>
        </el-table-column>
        <el-table-column v-if="[0, 2, 3, 4, 5, 6].includes(activeTab)" prop="orderDishes" label="订单菜品" min-width="180"
          show-overflow-tooltip />
        <el-table-column v-if="[0, 2, 3, 4, 5, 6].includes(activeTab)" prop="address" label="地址" min-width="180"
          show-overflow-tooltip />
        <el-table-column v-if="[2, 3, 4].includes(activeTab)" prop="estimatedDeliveryTime" label="预计送达时间"
          min-width="160" />
        <el-table-column v-if="[0, 5, 6].includes(activeTab)" prop="userName" label="用户名" min-width="100" />
        <el-table-column v-if="[0, 5, 6].includes(activeTab)" prop="phone" label="手机号" min-width="120" />
        <el-table-column v-if="[0, 6].includes(activeTab)" prop="orderTime" label="下单时间" min-width="160" />
        <el-table-column v-if="[5].includes(activeTab)" prop="deliveryTime" label="送达时间" min-width="160" />
        <el-table-column v-if="[6].includes(activeTab)" prop="cancelTime" label="取消时间" min-width="160" />
        <el-table-column v-if="[6].includes(activeTab)" prop="cancelReason" label="取消原因" min-width="120" />
        <el-table-column prop="amount" label="实收金额" min-width="100">
          <template #default="{ row }">￥{{ row.amount.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
        <el-table-column label="操作" min-width="150" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.status === 2" type="text" class="blueBug"
              @click="confirmOrderHandler(row)">接单</el-button>
            <el-button v-if="row.status === 2" type="text" class="delBut"
              @click="openCancelOrRejectDialog(row, '拒绝')">拒单</el-button>
            <el-button v-if="row.status === 3" type="text" class="blueBug"
              @click="deliverOrderHandler(row)">派送</el-button>
            <el-button v-if="[3, 4].includes(row.status)" type="text" class="delBut"
              @click="openCancelOrRejectDialog(row, '取消')">取消</el-button>
            <el-button v-if="row.status === 4" type="text" class="blueBug"
              @click="completeOrderHandler(row)">完成</el-button>
            <el-button type="text" @click="viewDetailHandler(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination v-if="total > 0" class="pageList" background layout="total, sizes, prev, pager, next, jumper"
        :total="total" v-model:current-page="page" v-model:page-size="pageSize" @current-change="fetchData"
        @size-change="fetchData" />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="订单信息" width="880px" class="order-dialog"
      :before-close="() => dialogVisible = false">
      <el-scrollbar v-if="orderDetail" class="dialog-scrollbar">
        <!-- 1. 顶部信息 -->
        <div class="order-top">
          <div class="left">
            <span class="order-label">订单号：</span>
            <span class="order-num">{{ orderDetail.number }}</span>
            <el-tag :type="statusTagType(orderDetail.status)" size="small" class="order-status-tag" disable-transitions>
              {{ getOrderType({ status: orderDetail.status }) }}
            </el-tag>
          </div>
          <div class="right">
            <span class="order-label">下单时间：</span>
            <span>{{ orderDetail.orderTime }}</span>
          </div>
        </div>

        <!-- 2. 中部信息 -->
        <div class="order-middle">
          <!-- 用户信息 -->
          <div class="user-info">
            <div class="info-grid">
              <div><span class="label">用户名：</span><span>{{ orderDetail.consignee }}</span></div>
              <div><span class="label">手机号：</span><span>{{ orderDetail.phone }}</span></div>
              <div v-if="[2, 3, 4, 5].includes(orderDetail.status)" class="full-row">
                <span class="label">{{ orderDetail.status === 5 ? '送达时间：' : '预计送达时间：' }}</span>
                <span>{{ orderDetail.status === 5 ? orderDetail.deliveryTime : orderDetail.estimatedDeliveryTime
                }}</span>
              </div>
              <div class="full-row">
                <span class="label">地址：</span>
                <span>{{ orderDetail.address }}</span>
              </div>
            </div>
            <div class="user-remark" :class="{ 'is-cancel': orderDetail.status === 6 }">
              <div class="remark-label">{{ orderDetail.status === 6 ? '取消原因' : '备注' }}</div>
              <span>{{ orderDetail.status === 6 ? (orderDetail.cancelReason || orderDetail.rejectionReason) :
                orderDetail.remark }}</span>
            </div>
          </div>

          <!-- 菜品信息 -->
          <div class="dish-info">
            <div class="info-label">菜品</div>
            <div class="dish-list">
              <div v-for="item in orderDetail.orderDetailList" :key="item.id" class="dish-item">
                <span>{{ item.name }} x{{ item.number }}</span>
                <span>￥{{ item.amount.toFixed(2) }}</span>
              </div>
            </div>
            <div class="dish-total">
              <span class="label">菜品小计</span>
              <span class="price">￥{{ (orderDetail.amount - 6 - orderDetail.packAmount).toFixed(2) }}</span>
            </div>
          </div>
        </div>

        <!-- 3. 底部信息 -->
        <div class="order-bottom">
          <div class="amount-info">
            <div class="info-label">费用</div>
            <div class="amount-grid">
              <div><span class="label">菜品小计：</span><span>￥{{ (orderDetail.amount - 6 -
                orderDetail.packAmount).toFixed(2)
                  }}</span></div>
              <div><span class="label">派送费：</span><span>￥6.00</span></div>
              <div><span class="label">打包费：</span><span>￥{{ orderDetail.packAmount.toFixed(2) }}</span></div>
              <div><span class="label">合计：</span><span class="price">￥{{ orderDetail.amount.toFixed(2) }}</span></div>
              <div><span class="label">支付渠道：</span><span>{{ orderDetail.payMethod === 1 ? '微信支付' : '支付宝支付' }}</span>
              </div>
              <div><span class="label">支付时间：</span><span>{{ orderDetail.checkoutTime }}</span></div>
            </div>
          </div>
        </div>
      </el-scrollbar>

      <div v-else v-loading="true" style="height: 400px;"></div>

      <template #footer>
        <!--
    v-if 判断 orderDetail 是否存在，确保在数据加载完成前不显示按钮。
    同时判断 status 不为 6 (已取消)。
  -->
        <div v-if="orderDetail && orderDetail.status !== 6" class="dialog-footer">

          <!-- 左侧的 Checkbox -->
          <div class="left-footer">
            <el-checkbox v-if="orderDetail.status === 2" v-model="isAutoNext">
              处理完自动跳转下一条
            </el-checkbox>
          </div>

          <!-- 右侧的按钮组 -->
          <div class="right-footer">

            <!-- 状态为 2 (待接单) 时显示 -->
            <template v-if="orderDetail.status === 2">
              <el-button @click="openCancelOrRejectDialog(currentHandlingRow!, '拒绝')">拒 单</el-button>
              <el-button type="primary" @click="confirmOrderHandler(currentHandlingRow!)">接 单</el-button>
            </template>

            <!-- 状态为 1, 3, 4, 5 时显示 -->
            <el-button v-if="[1, 3, 4, 5].includes(orderDetail.status)" @click="dialogVisible = false">
              返 回
            </el-button>

            <!-- 状态为 3 (待派送) 时显示 -->
            <el-button v-if="orderDetail.status === 3" type="primary" @click="deliverOrderHandler(currentHandlingRow!)">
              派 送
            </el-button>

            <!-- 状态为 4 (派送中) 时显示 -->
            <el-button v-if="orderDetail.status === 4" type="primary"
              @click="completeOrderHandler(currentHandlingRow!)">
              完 成
            </el-button>

            <!-- 状态为 1 (待付款) 时显示 (根据你的旧代码逻辑) -->
            <el-button v-if="[1].includes(orderDetail.status)" type="primary"
              @click="openCancelOrRejectDialog(currentHandlingRow!, '取消')">
              取消订单
            </el-button>

          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 拒单/取消原因弹窗 -->
    <el-dialog :title="cancelDialogTitle + '原因'" v-model="cancelDialogVisible" width="500px" class="cancelDialog">
      <el-form>
        <el-form-item :label="cancelDialogTitle + '原因：'">
          <el-select v-model="cancelReason" placeholder="请选择原因">
            <el-option v-for="item in (cancelDialogTitle === '取消' ? cancelReasonList : rejectReasonList)"
              :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="cancelReason === '自定义原因'" label="原因：">
          <el-input v-model.trim="remark" type="textarea" :placeholder="'请输入原因（限20字）'" maxlength="20" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmCancelOrReject">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import TabChange from './tabChange.vue';
import Empty from '@/components/Empty/index.vue';
import {
  getOrderPage, getOrderDetailById, completeOrder, deliverOrder,
  cancelOrder as cancelOrderApi,
  rejectOrder as rejectOrderApi,
  confirmOrder,
  getOrderStatusStatistics
} from '@/api/order';
import type { IOrder, IOrderPageQuery, IOrderDetail } from '@/types/order';
import { onUnmounted } from 'vue'; // 1. 导入 onUnmounted
import bus from '@/utils/eventBus' // 2. 导入事件总线
import router from '@/router';
// --- State ---
const route = useRoute();
const loading = ref(false);

const orderStatics = ref({ toBeConfirmed: 0, confirmed: 0, deliveryInProgress: 0 });
const searchForm = reactive({ number: '', phone: '', timeRange: [] as string[] | null });
const tableData = ref<IOrder[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const activeTab = ref(0);

const dialogVisible = ref(false);
const cancelDialogVisible = ref(false);
const cancelDialogTitle = ref<'取消' | '拒绝'>('取消');
const cancelReason = ref('');
const remark = ref('');
const orderDetail = ref<IOrderDetail | null>(null);
const currentHandlingRow = ref<IOrder | null>(null);

const rejectReasonList = [
  { value: 1, label: '订单量较多，暂时无法接单' },
  { value: 2, label: '菜品已销售完，暂时无法接单' },
  { value: 3, label: '餐厅已打烊，暂时无法接单' },
  { value: 0, label: '自定义原因' },
];
const cancelReasonList = [
  { value: 1, label: '订单量较多，暂时无法接单' },
  { value: 2, label: '菜品已销售完，暂时无法接单' },
  { value: 3, label: '骑手不足无法配送' },
  { value: 4, label: '客户电话取消' },
  { value: 0, label: '自定义原因' },
];

// --- Computed Properties ---
const tabList = computed(() => [
  { label: '全部订单', value: 0, num: 0 },
  { label: '待接单', value: 2, num: orderStatics.value.toBeConfirmed },
  { label: '待派送', value: 3, num: orderStatics.value.confirmed },
  { label: '派送中', value: 4, num: orderStatics.value.deliveryInProgress },
  { label: '已完成', value: 5, num: 0 },
  { label: '已取消', value: 6, num: 0 },
]);

const getOrderType = (row: IOrder) => {
  const statusMap: { [key: number]: string } = {
    1: '待付款', 2: '待接单', 3: '待派送', 4: '派送中', 5: '已完成', 6: '已取消'
  };
  return statusMap[row.status] || '未知状态';
};
// --- 核心修改在这里：添加这个缺失的函数 ---
const statusTagType = (status: number) => {
  // 根据订单状态返回对应的 Element Plus Tag 类型
  switch (status) {
    case 1: // 待付款
      return 'warning';
    case 2: // 待接单
      return ''; // 默认类型 (蓝色)
    case 3: // 待派送
      return 'warning';
    case 4: // 派送中
      return 'primary'; // Element Plus 中没有 'primary' 类型，通常用默认或 'success'
    case 5: // 已完成
      return 'success';
    case 6: // 已取消
      return 'info';
    default:
      return 'danger'; // 其他未知状态显示为危险
  }
};
// --- Core Methods ---
const fetchData = async () => {
  loading.value = true;
  try {
    const params: IOrderPageQuery = {
      page: page.value,
      pageSize: pageSize.value,
      number: searchForm.number || undefined,
      phone: searchForm.phone || undefined,
      beginTime: searchForm.timeRange?.[0],
      endTime: searchForm.timeRange?.[1],
      status: activeTab.value || undefined,
    };
    const response = await getOrderPage(params);
    tableData.value = response.data.records;
    total.value = response.data.total;
  } finally {
    loading.value = false;
  }
};

const fetchOrderStatics = async () => {
  try {
    const response = await getOrderStatusStatistics();
    orderStatics.value = response.data;
  } catch (error) { console.error("获取订单统计失败:", error); }
};

const handleSearch = () => {
  page.value = 1;
  fetchData();
};

const handleTabChange = () => {
  page.value = 1;
  fetchData();
};

// viewDetailHandler 现在只负责打开弹窗和显示数据
const viewDetailHandler = async (row: IOrder) => {
  dialogVisible.value = true;
  orderDetail.value = null; // 先显示加载中
  currentHandlingRow.value = row;
  try {
    const response = await getOrderDetailById(row.id);
    orderDetail.value = response.data;
  } catch (error) {
    ElMessage.error('获取订单详情失败');
    dialogVisible.value = false;
  }
};
// --- 核心修改在这里：创建一个专门处理 URL query 的函数 ---
const checkUrlForOrderDetail = () => {
  const orderId = route.query.orderId;
  if (orderId && !dialogVisible.value) {
    // 如果 URL 中有 orderId 且弹窗未打开
    console.log('从 URL query 检测到 orderId, 准备打开详情:', orderId);
    viewDetailHandler({
      id: Number(orderId),
      orderDishes: '',
      number: '',
      phone: '',
      address: '',
      amount: 0,
      consignee: '',
      estimatedDeliveryTime: '',
      orderTime: '',
      packAmount: 0,
      payMethod: 0,
      remark: '',
      status: 0,
      tablewareNumber: 0,
      userId: 0,
      userName: ''
    });

    // （可选）处理完后，可以把 query 从 URL 中移除，避免刷新时重复打开
    // router.replace({ query: {} });
  }
};
// --- 核心修改 1: 创建一个专门处理全局事件的函数 ---
const handleViewOrderDetailEvent = (orderId: number) => {
  console.log('接收到来自 Navbar 的订单查看请求, ID:', orderId);

  // 如果当前不在订单页，先跳转
  if (route.name !== 'Order') {
    router.push({ name: 'Order' });
  }

  // 直接调用 API 获取详情，然后打开弹窗
  // 这样就不需要伪造 row 对象了
  dialogVisible.value = true;
  orderDetail.value = null; // 显示加载中
  currentHandlingRow.value = { id: orderId, status: 2 }; // 存储 id 和假定的状态

  getOrderDetailById(orderId).then(response => {
    orderDetail.value = response.data;
  }).catch(() => {
    ElMessage.error('获取订单详情失败');
    dialogVisible.value = false;
  });
};

const confirmOrderHandler = (row: IOrder) => {
  ElMessageBox.confirm('确认接单吗?', '提示', { type: 'warning' }).then(async () => {
    try {
      await confirmOrder({ id: row.id });
      ElMessage.success('接单成功！');
      dialogVisible.value = false; // 操作成功后关闭详情弹窗
      fetchData();
      fetchOrderStatics();
    } catch (error) {
      console.error("接单失败:", error);
    }
  });
};

const deliverOrderHandler = (row: IOrder) => {
  ElMessageBox.confirm('确认派送吗?', '提示', { type: 'warning' }).then(async () => {
    try {
      await deliverOrder(row.id);
      ElMessage.success('派送成功！');
      dialogVisible.value = false;
      fetchData();
      fetchOrderStatics();
    } catch (error) {
      console.error("派送失败:", error);
    }
  });
};

const completeOrderHandler = (row: IOrder) => {
  ElMessageBox.confirm('确认完成订单吗?', '提示', { type: 'warning' }).then(async () => {
    try {
      await completeOrder(row.id);
      ElMessage.success('订单已完成！');
      dialogVisible.value = false;
      fetchData();
      fetchOrderStatics();
    } catch (error) {
      console.error("完成订单失败:", error);
    }
  });
};

const openCancelOrRejectDialog = (row: IOrder, title: '取消' | '拒绝') => {
  // 关键修改 2: 无论是从表格还是弹窗调用，都更新 currentHandlingRow
  currentHandlingRow.value = row;
  cancelDialogTitle.value = title;
  cancelReason.value = '';
  remark.value = '';
  cancelDialogVisible.value = true;
  dialogVisible.value = false; // 先关闭详情弹窗
};

const confirmCancelOrReject = async () => {
  // 关键修改 3: 检查 currentHandlingRow.value 是否存在
  if (!currentHandlingRow.value) {
    ElMessage.error('无法获取订单信息，请重试');
    return;
  }
  if (!cancelReason.value) return ElMessage.error(`请选择${cancelDialogTitle.value}原因`);
  if (cancelReason.value === '自定义原因' && !remark.value) return ElMessage.error(`请输入${cancelDialogTitle.value}原因`);

  const isCancel = cancelDialogTitle.value === '取消';
  const apiCall = isCancel ? cancelOrderApi : rejectOrderApi;
  const reason = cancelReason.value === '自定义原因' ? remark.value : cancelReason.value;
  const params = {
    id: currentHandlingRow.value.id,
    [isCancel ? 'cancelReason' : 'rejectionReason']: reason
  };

  try {
    await apiCall(params);
    ElMessage.success('操作成功！');
    cancelDialogVisible.value = false;
    fetchData();
    fetchOrderStatics();
  } catch (error) { console.error("操作失败:", error); }
};
// --- 核心修改：使用 watch 监听路由 query 的变化 ---
// 这能处理在订单页面内部，通过通知再次点击跳转的情况
watch(() => route.query.orderId, (newOrderId) => {
  if (newOrderId) {
    checkUrlForOrderDetail();
  }
});
// --- Lifecycle Hook ---
onMounted(() => {
  checkUrlForOrderDetail();
  const statusFromQuery = Number(route.query.status);
  if (statusFromQuery && [0, 2, 3, 4, 5, 6].includes(statusFromQuery)) {
    activeTab.value = statusFromQuery;
  }
  fetchData();
  fetchOrderStatics();
  // --- 核心修改 2: 监听事件，并绑定到新的处理函数 ---
  bus.on('view-order-detail', handleViewOrderDetailEvent);
});
onUnmounted(() => {
  // 移除事件监听
  bus.off('view-order-detail', handleViewOrderDetailEvent);
});
</script>
<style lang="scss">
/*
 * =============================================================================
 *  订单管理页面的全局样式 (Non-Scoped)
 * =============================================================================
 */
.dashboard-container {
  padding: 20px;
  background-color: #f6f7f9;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tab-container {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__item {
    font-size: 14px;
    font-weight: 500;

    &.is-active {
      color: #3370ff;
    }
  }

  .tab-badge {
    margin-left: 5px;

    .el-badge__content {
      background-color: #f56c6c;
      border: none;
    }
  }
}

.content-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.tableBar {
  .el-form-item {
    margin-bottom: 20px;
  }

  .el-button {
    margin-left: 10px;
  }
}

.tableBox {
  .el-button--text {
    padding: 0 5px;

    &.blueBug {
      color: #3370ff;
    }

    &.delBut {
      color: #f56c6c;
    }
  }
}

.pageList {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/*
 * =============================================================================
 *  订单详情弹窗的专属美化样式 (Non-Scoped)
 * =============================================================================
 */
.order-dialog {
  .el-dialog__header {
    padding: 20px 30px;
    border-bottom: 1px solid #e7e6e6;
  }

  .el-dialog__body {
    padding: 0; // 移除默认内边距，由 scrollbar 控制
  }

  .dialog-scrollbar {
    // 限制内容区最大高度，并设置内边距
    max-height: 60vh;
    padding: 20px 30px;
  }

  // --- 顶部 ---
  .order-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7e6e6;

    .order-label {
      color: #666;
    }

    .order-num {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .order-status-tag {
      margin-left: 10px;
    }
  }

  // --- 中部 ---
  .order-middle {
    .user-info {
      background-color: #fbfbfa;
      padding: 20px;
      margin-top: 20px;
      border-radius: 4px;

      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;

        .label {
          color: #666;
          margin-right: 10px;
        }

        .full-row {
          grid-column: span 2;
        }
      }

      .user-remark {
        margin-top: 15px;
        padding: 10px;
        background: #fffbf0;
        border: 1px solid #fbe396;
        border-radius: 4px;

        .remark-label {
          background-color: #fbe396;
          padding: 5px 8px;
          border-radius: 4px;
          display: inline-block;
          margin-right: 15px;
          font-weight: 500;
        }

        span {
          color: #f2a402;
        }

        &.is-cancel {
          background-color: #fff;
          border-color: #e5e4e4;

          .remark-label {
            background-color: #f0f0f0;
          }

          span {
            color: #f56c6c;
          }
        }
      }
    }

    .dish-info,
    .amount-info {
      padding: 20px 0;
      border-bottom: 1px solid #e7e6e6;
      display: flex;

      .info-label {
        width: 80px;
        color: #666;
      }

      .dish-list,
      .amount-grid {
        flex: 1;
      }

      .dish-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .dish-total {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #e7e6e6;
        text-align: right;

        .label {
          font-weight: bold;
        }

        .price {
          color: #f56c6c;
          font-weight: bold;
          margin-left: 20px;
        }
      }
    }
  }

  // --- 底部 ---
  .order-bottom {
    .amount-info {
      border-bottom: none;

      .amount-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;

        .label {
          color: #666;
        }

        .price {
          color: #f56c6c;
        }
      }
    }
  }

  // --- Footer ---
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
</style>
